// vue.config.js
// https://github.com/staven630/vue-cli4-config
const path = require('path');

//https://blog.csdn.net/qq_18188119/article/details/111661792
const CopyWebpackPlugin = require('copy-webpack-plugin')
const webpack = require('webpack')
let cesium = './node_modules/cesium'
let cesiumSource = './node_modules/cesium/Source'
let cesiumjs = './node_modules/cesium/Source/Cesium.js'
let cesiumWorkers = '../Build/Cesium/Workers'

const CompressionWebpackPlugin = require("compression-webpack-plugin"); // 开启gzip压缩， 按需引用
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i; // 开启gzip压缩， 按需写入
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin; // 打包分析
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV);
const resolve = (dir) => path.join(__dirname, dir);

module.exports = {
  publicPath: IS_PROD ? './' : './', // 公共路径
  indexPath: 'index.html', // 相对于打包路径index.html的路径
  outputDir: process.env.outputDir || 'dist', // 'dist', 生产环境构建文件的目录
  assetsDir: 'static', // 相对于outputDir的静态资源(js、css、img、fonts)目录
  lintOnSave: false, // 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码
  runtimeCompiler: true, // 是否使用包含运行时编译器的 Vue 构建版本
  productionSourceMap: true, // 生产环境的 source map
  parallel: require("os").cpus().length > 1, // 是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建。
  pwa: {}, // 向 PWA 插件传递选项。
  chainWebpack: config => {
    config.resolve.symlinks(true); // 修复热更新失效
    // 如果使用多页面打包，使用vue inspect --plugins查看html是否在结果数组中
    config.plugin("html").tap(args => {
      // 修复 Lazy loading routes Error
      args[0].chunksSortMode = "none";
      return args;
    });
    config.resolve.alias // 添加别名
      .set('@', resolve('src'))
      .set('@assets', resolve('src/assets'))
      .set('@components', resolve('src/components'))
      .set('@lib', resolve('src/lib'))
      .set('@g3x', resolve('src/lib/g3x'))
      .set('@g3xObjBase', resolve('src/lib/g3x/base'))
      .set('@g3xbase', resolve('src/lib/g3x/base'))
      .set('@g3v', resolve('src/lib/g3x/g3v'))
      .set('@g3vObjects', resolve('src/lib/g3x/g3v/objects'))
      .set('@g3xObj', resolve('src/lib/g3x/objects'))
      .set('@mixins', resolve('src/mixins'))
      .set('@views', resolve('src/views'))
      .set('@cesium', path.resolve(__dirname, cesium))
      .set('@cesiumjs', path.resolve(__dirname, cesiumjs))
      .set('@czm', resolve('src/lib/g3x/extends/czm'))
      .set('@functional', resolve('src/views/functional'))
      .set('@funcComp', resolve('src/views/functional/components'))
      .set('@store', resolve('src/store'));
    // 压缩图片
    // 需要 cnpm i -D image-webpack-loader
    config.module
      .rule("images")
      .use("image-webpack-loader")
      .loader("image-webpack-loader")
      .options({
        mozjpeg: {
          progressive: true,
          quality: 65
        },
        optipng: {
          enabled: false
        },
        pngquant: {
          quality: [0.65, 0.9],
          speed: 4
        },
        gifsicle: {
          interlaced: false
        },
        webp: {
          quality: 75
        }
      });
    // console.log('module js 1 ========================================');
    // console.log(config.module.rule("js"));
    // console.log('config.module.rules 11 ========================================');
    // console.log(config.module.rules);
    // config.module
    //   .rule("js")
    //   .test('/\.js$/')
    //   .use("import-meta-loader")
    //   .loader('@open-wc/webpack-import-meta-loader');

    // console.log('config.module.rules 22 ========================================');
    // // console.log(config.module.rules);

    // console.log('module js 2 ========================================');
    // console.log(config.module.rule("js"));

    // console.log(config.module.rules.js);

    // 打包分析, 打包之后自动生成一个名叫report.html文件(可忽视)
    if (IS_PROD) {
      config.plugin("webpack-report").use(BundleAnalyzerPlugin, [{
        analyzerMode: "static"
      }]);
    }
  },
  configureWebpack: config => {
    const plugins = [
      new CopyWebpackPlugin([{
        from: path.join(cesiumSource, cesiumWorkers),
        to: 'Workers'
      }, {
        from: path.join(cesiumSource, 'Assets'),
        to: 'Assets'
      }, {
        from: path.join(cesiumSource, 'Widgets'),
        to: 'Widgets'
      }, {
        from: path.join(cesiumSource, 'ThirdParty/Workers'),
        to: 'ThirdParty/Workers'
      }]),
      new webpack.DefinePlugin({
        CESIUM_BASE_URL: JSON.stringify('./')
      })
    ];
    // 开启 gzip 压缩
    // 需要 npm i -D compression-webpack-plugin
    // if (IS_PROD) {
    //   plugins.push(
    //     new CompressionWebpackPlugin({
    //       filename: "[path].gz[query]",
    //       algorithm: "gzip",
    //       test: productionGzipExtensions,
    //       threshold: 10240,
    //       minRatio: 0.8,
    //       deleteOriginalAssets: true
    //     })
    //   );
    // }
    config.plugins = [...config.plugins, ...plugins];
    config.module = config.module || {};
    config.module = {
      ...config.module,
      unknownContextCritical: /^.\/.*$/,
      unknownContextCritical: false
    }
  },
  css: {
    // extract: IS_PROD,
    requireModuleExtension: false, // 去掉文件名中的 .module
    loaderOptions: {
      // 给 less-loader 传递 Less.js 相关选项
      less: {
        lessOptions: {
          // `globalVars` 定义全局对象，可加入全局变量
          globalVars: {
            primary: '#333'
          },
          javascriptEnabled: true
        },
        // javascriptEnabled: true
      }
    }
  },
  devServer: {
    overlay: { // 让浏览器 overlay 同时显示警告和错误
      warnings: true,
      errors: true
    },
    host: "localhost",
    port: 8013, // 端口号
    https: false, // https:{type:Boolean}
    open: true, //配置自动启动浏览器
    hotOnly: true, // 热更新
    // proxy: 'http://localhost:8080'   // 配置跨域处理,只有一个代理
    proxy: { //配置多个跨域
      "/api": {
        target: "http://172.11.11.11:7071",
        changeOrigin: true,
        // ws: true,//websocket支持
        secure: false,
        pathRewrite: {
          "^/api": "/"
        }
      },
      "/api2": {
        target: "http://172.12.12.12:2018",
        changeOrigin: true,
        //ws: true,//websocket支持
        secure: false,
        pathRewrite: {
          "^/api2": "/"
        }
      },
    }
  }
}


// vue3.0报错：Cannot find module ‘vue-loader-v16/package.json‘的解决办法
// 使用命令cnpm -- install 代替 cnpm install来执行。


// ERROR  Error: Rule can only have one resource source 无效
// rm -rf node_modules
// rm package-lock.json
// npm install --legacy-peer-deps

// "vue-loader-v16": "^16.0.0-beta.5.4", 最后安装
